<template>
  <el-dialog title="预览" :visible.sync="visible" style="min-width: 550px;" top="7vh" width="40%" :center="true" :before-close="handleClose" :append-to-body="true">
    <!-- 手机 -->
    <div class="preview_dialog">
      <div class="preview_iframe">
        <iframe
          id="iframeEngine"
          ref="iframe"
          :src="visible?'http://192.168.30.206:8080/engine.html':''"
          frameborder="0"
          style="height: 100%;width: 100%; border-radius: 8px; background: white;"
        />
      </div>
      <div class="preview_qr">
        <span>手机扫码预览落地页 </span>
        <vue-qr text="http://192.168.30.206:8080/engine.html" :size="200" />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Vue from 'vue'
import { Dialog } from 'element-ui'
import vueQr from 'vue-qr'
import { mapGetters } from 'vuex'
Vue.use(Dialog)
export default {
  name: 'Preview',
  components: {
    vueQr
  },
  computed: {
    ...mapGetters([
      'viewData'
    ])
  },
  props: {
    previewVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: this.previewVisible,
      imageUrl: '@/assets/logo_2.png'
    }
  },
  watch: {
    previewVisible(val) {
      this.visible = val
      if (!val) return
      setTimeout(() => {
        this.$refs.iframe.contentWindow.postMessage(this.viewData, 'http://192.168.30.206:8080/engine.html')
      }, 500)
    }
  },
  mounted() {
  },
  methods: {
    handleClose() {
      const that = this
      that.visible = false
      that.$emit('hide', that.visible)
    }
  }
}
</script>

<style scoped lang="scss">
  .preview_dialog {
    display: flex;
    justify-content: space-around;
    img {
      width: 200px;
      height: 200px;
    }
    .preview_iframe {
      width: 320px;
      height: 568px;
      max-width: 320px;
      max-height: 568px;
      min-width: 320px;
      min-height: 568px;
      transform: scale(0.95);
      background: rgba(228, 205, 205, 0.4);
      border-radius: 17px;
      padding: 8px;
    }
    .preview_qr {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

</style>
